window.BBScroller = function(evt, div, el) {
    if (this.scroller.offsetBoundary.top === 0) {
        this.scroller.updateBoundary();
    }
    var maxOffset = this.scroller.offsetBoundary[1] - 400;
    var bottom = this.getHeight() + 50;
    if (evt.xy[1] > bottom && this.scroller.offset.y >= maxOffset) {
        var offset = -1 * this.scroller.offset.y + 8;
        this.scroller.scrollTo({
            x: -1 * this.scroller.offset.x,
            y: offset
        });
    } else if (evt.xy[1] < 130 && this.scroller.offset.y <= 0) {
        this.scroller.scrollTo({
            x: -1 * this.scroller.offset.x,
            y: (-1 * this.scroller.offset.y) - 8
        });
    }

    if (this.scroll === 'both') {
        var maxOffset = this.scroller.offsetBoundary[0];
        var right = this.getWidth() - 70;
        if (evt.xy[0] > right && this.scroller.offset.x >= maxOffset) {
            var offset = -1 * this.scroller.offset.x + 8;
            this.scroller.scrollTo({
                x: offset,
                y: -1 * this.scroller.offset.y
            });
        } else if (evt.xy[0] < 70 && this.scroller.offset.x <= 0) {
            this.scroller.scrollTo({
                x: (-1 * this.scroller.offset.x) - 8,
                y: -1 * this.scroller.offset.y
            });
        }
    }

    //console.log(evt.xy, this.getWidth(), this.getHeight(), this.scroller.offsetBoundary[0], this.scroller.offsetBoundary[1]);
};

Ext.List = Ext.extend(Ext.DataView, {
    componentCls: 'x-list',
    pinHeaders: Ext.is.iOS || Ext.is.Desktop,
    indexBar: false,
    grouped: false,
    clearSelectionOnDeactivate: true,

    renderTpl: [
        '<tpl if="grouped"><h3 class="x-list-header x-list-header-swap x-hidden-display"></h3></tpl>'
    ],

    groupTpl: [
        '<tpl for=".">',
            '<div class="x-list-group x-group-{id}">',
                '<h3 class="x-list-header">{group}</h3>',
                '<div class="x-list-group-items">',
                    '{items}',
                '</div>',
            '</div>',
        '</tpl>'
    ],
    itemSelector: '.x-list-item',
    itemCls: '',
    onItemDisclosure: false,
    preventSelectionOnDisclose: true,
    initComponent: function() {
        var memberFnsCombo = {};
        //<deprecated since=0.99>
        if (this.tpl) {
            console.warn('Ext.List: The tpl config has been removed and replaced by itemTpl. Please remove tpl and itemSelector from your Lists.');
            // convert from array to string
            if (Ext.isArray(this.tpl)) {
                this.tpl = this.tpl.join('');
            } else if (this.tpl.html) {
                Ext.apply(memberFnsCombo, this.tpl.initialConfig);
                this.tpl = this.tpl.html;
            }
            this.tpl = Ext.util.Format.trim(this.tpl);
            if (this.tpl.indexOf("\"x-list-item\"") !== -1) {
                throw new Error("Ext.List: Using a CSS class of x-list-item within your own tpl will break Ext.Lists. Remove the x-list-item from the tpl/itemTpl");
            }
            var tpl = this.tpl,
                first = '<tpl for=".">',
                firstLn = first.length,
                end = '</tpl>',
                tplFirst = this.tpl.substr(0, firstLn),
                tplEndIdx = this.tpl.lastIndexOf(end),
                stripped;

            if (tplFirst === first && tplEndIdx !== -1) {
                this.itemTpl = tpl.substr(firstLn, tplEndIdx - firstLn);
                this.itemSelector = Ext.List.prototype.itemSelector;
            } else {
                throw new Error("Ext.List: tpl to itemTpl conversion failed.");
            }
        }
        //</deprecated>

        if (Ext.isArray(this.itemTpl)) {
            this.itemTpl = this.itemTpl.join('');
        } else if (this.itemTpl && this.itemTpl.html) {
            Ext.apply(memberFnsCombo, this.itemTpl.initialConfig);
            this.itemTpl = this.itemTpl.html;
        }

        //<debug>
        if (!Ext.isDefined(this.itemTpl)) {
            throw new Error("Ext.List: itemTpl is a required configuration.");
        }
        // this check is not enitrely fool proof, does not account for spaces or multiple classes
        // if the check is done without "s then things like x-list-item-entity would throw exceptions that shouldn't have.
        if (this.itemTpl && this.itemTpl.indexOf("\"x-list-item\"") !== -1) {
            throw new Error("Ext.List: Using a CSS class of x-list-item within your own tpl will break Ext.Lists. Remove the x-list-item from the tpl/itemTpl");
        }
        //</debug>

        this.tpl = '<tpl for="."><div class="x-list-item ' + this.itemCls + '"><div class="x-list-item-body">' + this.itemTpl + '</div>';
        if (this.onItemDisclosure) {
            this.tpl += '<div class="x-list-disclosure"></div>';
        }
        this.tpl += '</div></tpl>';
        this.tpl = new Ext.XTemplate(this.tpl, memberFnsCombo);


        if (this.grouped) {

            this.listItemTpl = this.tpl;
            if (Ext.isString(this.listItemTpl) || Ext.isArray(this.listItemTpl)) {
                // memberFns will go away after removal of tpl configuration for itemTpl
                // this copies memberFns by storing the original configuration.
                this.listItemTpl = new Ext.XTemplate(this.listItemTpl, memberFnsCombo);
            }
            if (Ext.isString(this.groupTpl) || Ext.isArray(this.groupTpl)) {
                this.tpl = new Ext.XTemplate(this.groupTpl);
            }
        }
        else {
            this.indexBar = false;
        }

        if (this.scroll !== false) {
            this.scroll = {
                direction: 'vertical',
                useIndicators: !this.indexBar
            };
        }

        // if (this.enableAutoPaging) {
        //     this.enablePaging = true;
        // }

        Ext.List.superclass.initComponent.call(this);

        if (this.onItemDisclosure) {
            // disclosure can be a function that will be called when
            // you tap the disclosure button
            if (Ext.isFunction(this.onItemDisclosure)) {
                this.onItemDisclosure = {
                    scope: this,
                    handler: this.onItemDisclosure
                };
            }
        }

        this.on('deactivate', this.onDeactivate, this);

        this.addEvents(
        /**
        * @event disclose
        * Fires when the user taps the disclosure icon on an item
        * @param {Ext.data.Record} record The record associated with the item
        * @param {Ext.Element} node The wrapping element of this node
        * @param {Number} index The index of this list item
        * @param {Ext.util.Event} e The tap event that caused this disclose to fire
        */
             'disclose',

        /**
        * @event update
        * Fires whenever the contents of the List is updated.
        * @param {Ext.List} list This list
        */
             'update'
         );

        if (this.scroll !== false && window.BBTouch == false) {
            this.on('mousemove', window.BBScroller, this, { element: 'el' });
        }
    }
});